<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图像分割</title>
</head>

<body>
  <div>
    <div class="bck">
      <div class="btn_bck">
        <div class="btn">静态分割</div>
        <div class="btn">动态分割</div>
      </div>
      <!-- 静态分割弹窗 -->
      <div class="static">
        <div class="stat_btn">选择待处理图片</div>
        <input class="stat_file" type="file" style="display: none;">
        <div class="stat_btn">选择背景图片</div>
        <input class="stat_back" type="file" style="display: none;">
        <div class="sure">确定</div>
      </div>
      <!-- 动态分割弹窗 -->
      <div class="dynamic">
        <div class="dyn_btn">选择视频文件</div>
        <input class="dyn_file" type="file" style="display: none;">
        <div class="dyn_btn">选择背景</div>
        <input class="dyn_back" type="file" style="display: none;">
        <div class="dyn_sure">确定</div>
      </div>
    </div>
  </div>
</body>
<script>
  var btns = document.querySelectorAll('.btn')
  var stat = document.querySelector('.static')
  var stat_btns = document.querySelectorAll('.stat_btn')
  var sure = document.querySelector('.sure')
  // 待处理文件文件名(静态)
  var pending = ''
  // 背景图片文件名(静态)
  var back_img = ''
  // 获取静态文本框(待处理的图片)
  var ipt_file = document.querySelector('.stat_file')
  // 获取静态文本框(背景图片图片)
  var ipt_back = document.querySelector('.stat_back')
  // 静态分割
  btns[0].onclick = function () {
    stat.style.display = 'block'
  }
  // 选择代处理图片
  stat_btns[0].onclick = function () {
    ipt_file.click()
    stat_btns[0].style.background = 'rgb(21, 218, 168)'
    sure.style.background = 'rgb(21, 218, 168)'
  }
  ipt_file.addEventListener('change', function (e) {
    // 获取到图片的地址名
    pending = e.target.files[0].name
    console.log(pending);
  })
  //选择背景图片
  stat_btns[1].onclick = function () {
    ipt_back.click()
    stat_btns[1].style.background = 'rgb(21, 218, 168)'
  }
  ipt_back.addEventListener('change', function (e) {
    // 获取到背景图片地址名
    back_img = e.target.files[0].name
    console.log(back_img)
  })
  sure.onclick = async function () {
    if (back_img == '') {
      const res = await fetch(`http://127.0.0.1:5100/fenge/${pending}`)
      console.log(res);
      window.location.href = `./01_1_中间跳转页面.html?result=${pending}`
    } else {
      const res = await fetch(`http://127.0.0.1:5100/fenge1/${pending}/${back_img}`)
      console.log(res);
      window.location.href = `./01_1_中间跳转页面.html?result=${pending}`
    }
  }
  // 动态分割
  var dyn = document.querySelector('.dynamic')
  // 待处理视频文件名
  var video = ''
  // 待处理视频文件背景
  var video_img = ''
  // 获取文本框(待处理的视频)
  var dyn_file = document.querySelector('.dyn_file')
  // 获取文本框(背景图片图片)
  var dyn_back = document.querySelector('.dyn_back')
  var dyn_btns = document.querySelectorAll('.dyn_btn')
  var dyn_sure = document.querySelector('.dyn_sure')
  btns[1].onclick = function () {
    dyn.style.display = 'block'
  }

  // 选择待处理的视频
  dyn_btns[0].onclick = function () {
    dyn_file.click()
    dyn_btns[0].style.background = 'rgb(21, 218, 168)'
    dyn_sure.style.background = 'rgb(21, 218, 168)'
  }
  dyn_file.addEventListener('change', function (e) {
    // 获取视频的名字
    video = e.target.files[0].name
    console.log(video)
  })
  // 选择背景图片
  dyn_btns[1].onclick = function () {
    dyn_back.click()
    dyn_btns[1].style.background = 'rgb(21, 218, 168)'
  }
  dyn_back.addEventListener('change', function (e) {
    // 获取背景图片名
    video_img = e.target.files[0].name
    dyn_sure.style.background = 'rgb(21, 218, 168)'
    console.log(video_img)
  })

  // 调用接口
  dyn_sure.onclick = async function () {
    if (video_img == '') {
      const res = await fetch(`http://127.0.0.1:5100/video_tihuan/${video}`)
      console.log(res);
      window.location.href = `./02_1_中间跳转页面.html?result=${video}`
      
    } else {
      const res = await fetch(`http://127.0.0.1:5100/video_tihuan1/${video}/${video_img}`)
      console.log(res);
      window.location.href = `./02_1_中间跳转页面.html?result=${video}`
    }
  }
</script>
<style>
  .bck {
    width: 100%;
    height: 900px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url('./img/bck.png');
    background-size: cover;
  }

  .btn_bck {
    width: 200px;
    height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: rgba(18, 37, 18, .1);
  }

  .btn {
    width: 100px;
    height: 50px;
    margin-left: 50px;
    margin-top: 50px;
    margin-bottom: 25px;
    text-align: center;
    line-height: 50px;
    background-color: rgba(40, 199, 199);
  }

  .static {
    display: none;
    width: 400px;
    height: 500px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url('./img/static_1.png');
    background-size: cover;
  }

  .stat_btn {
    width: 200px;
    height: 50px;
    margin-left: 100px;
    margin-top: 80px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(223, 86, 33);
  }

  .sure {
    width: 200px;
    height: 50px;
    margin-left: 100px;
    margin-top: 100px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(223, 86, 33);
  }

  .dynamic {
    display: none;
    width: 400px;
    height: 500px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url('./img/static_1.png');
    background-size: cover;
  }

  .dyn_btn {
    width: 200px;
    height: 50px;
    margin-left: 100px;
    margin-top: 80px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(223, 86, 33);
  }

  .dyn_sure {
    width: 200px;
    height: 50px;
    margin-left: 100px;
    margin-top: 100px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(223, 86, 33);
  }
</style>

</html>